<style>
hr {
  border: 0px;
}
</style>

<template>
  <div>
    <template>
      <Form ref="supplierDetailForm" :model="supplierDetailForm" :label-width="90" :rules="supplierDetailFormValidate" inline>
        <div>
          <div style="overflow: hidden;">
            <div style="width: 500px;float:left">
              <FormItem label="商户账号" prop="account" style="width:300px">
                <Input v-model="supplierDetailForm.account" :disabled="supplierDetailOperateType===1||reviewPageModal" />
              </FormItem>
              <FormItem label="商户密码" prop="password" style="width:300px" v-if="supplierDetailOperateType===0" :error="errorPass">
                <Input type="password" v-model="supplierDetailForm.password" />
              </FormItem>
              <FormItem label="商户名称" prop="supplierName" style="width:300px">
                <Input v-model="supplierDetailForm.supplierName" :disabled="reviewPageModal"/>
              </FormItem>
              <FormItem label="商户类型" prop="supplierType" style="width:300px">
                <!-- <Input v-model="supplierDetailForm.kindid"/> -->
                <Select v-model="supplierDetailForm.supplierType" placeholder="请选择" :disabled="reviewPageModal">
                  <Option :value="0">普通商户</Option>
                  <Option :value="1">达人商户</Option>
                </Select>
              </FormItem>

            </div>
            <div style="width: 500px;float:left">
              <FormItem label="联系人" prop="linkMan" style="width:300px">
                <Input v-model="supplierDetailForm.linkMan" :disabled="reviewPageModal"/>
              </FormItem>
              <FormItem label="手机号" prop="mobile" style="width:300px">
                <Input v-model="supplierDetailForm.mobile" :maxlength="11" :disabled="reviewPageModal" />
              </FormItem>
              <FormItem label="联系电话" prop="telephone" style="width:300px">
                <Input v-model="supplierDetailForm.telephone" :maxlength="11" :disabled="reviewPageModal" />
              </FormItem>
              <FormItem label="邮箱" prop="email" style="width:300px">
                <Input v-model="supplierDetailForm.email" :disabled="reviewPageModal" />
              </FormItem>
              <FormItem label="QQ号" prop="qq" style="width:300px">
                <Input v-model="supplierDetailForm.qq" :disabled="reviewPageModal" />
              </FormItem>
            </div>
            <div style="width: 500px;float:left">
              <!-- al-cascader组件存在问题：组件本身存在缓存，即使重新设置数组为空-相关缓存依然清除不了 -->
              <!-- 解决方法：一.重写组件（暂时未解决） 二.每次加载重新渲染该组件（性能稍差）  -->
              <div v-if="againRenderCascaderFlag" >
                <FormItem label="所在省/市" style="width:300px">
                  <al-cascader ref="alCascader" v-model="supplierDetailFormAddressArr" level="1" :disabled="reviewPageModal" />
                </FormItem>
              </div>
              <FormItem label="详细地址" prop="address" style="width:300px">
                <textarea v-model="supplierDetailForm.address" :disabled="reviewPageModal" style="width:210px;height:60px;resize:none;line-height:2.0;border:1px solid #dddee1;" />
              </FormItem>
              <FormItem label="经度" prop="lng" style="width:300px">
                <Input v-model="supplierDetailForm.lng" :disabled="reviewPageModal" />
              </FormItem>
              <FormItem label="纬度" prop="lat" style="width:300px">
                <Input v-model="supplierDetailForm.lat" :disabled="reviewPageModal" />
              </FormItem>
            </div>
          </div>

          <hr style="border-bottom:1px dashed #dddee1; height:1px;">

          <div style="overflow: hidden; margin-top: 36px;">
            <div style="width: 500px;float:left">
              <Form-item label="封面图片:">
                <image-component ref="supplierLitpicComp" @on-remove-success="supplierLitpicRemoveSuccess" @on-add-success="supplierLitpicAddSuccess">
                </image-component>
              </Form-item>
            </div>
            <div style="width: 500px;float:left">
              <Form-item label="列表图片:">
                <image-component ref="supplierPiclistComp" @on-remove-success="supplierPiclistRemoveSuccess" @on-add-success="supplierPiclistAddSuccess">
                </image-component>
              </Form-item>
            </div>
          </div>

          <hr style="border-bottom:1px dashed #dddee1; height:1px;">
          <div style="overflow: hidden; margin-top: 36px;">
            <div style="width: 500px;float:left">
              <Form-item label="营业执照:">
                <image-component ref="supplierLicensepicComp" @on-remove-success="supplierLicensepicRemoveSuccess" @on-add-success="supplierLicensepicAddSuccess">
                </image-component>
              </Form-item>
            </div>
            <div style="width: 800px;float:left">
              <FormItem label="经营范围:" prop="runRange">
                <textarea v-model="supplierDetailForm.runRange" :disabled="reviewPageModal" style="width:400px;height:80px;resize:none;line-height:2.0;border:1px solid #dddee1;" />
              </FormItem>
            </div>
          </div>

          <hr style="border-bottom:1px dashed #dddee1; height:1px;">

          <div style="overflow: hidden; margin-top: 36px;">
            <FormItem label="商户介绍" prop="content">
              <textarea v-model="supplierDetailForm.content" :disabled="reviewPageModal" style="width:400px;height:80px;resize:none;line-height:2.0;border:1px solid #dddee1;" />
            </FormItem>
          </div>
        </div>
        <hr style="border-bottom:1px solid #dddee1; height:1px;">
      </Form>

      <div style="padding:16px 0px;margin-left:2px;" class="operation">
        <Button @click="cancelSubmitSupplier" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
        <Button :loading="submitLoading" @click="submitSupplier" type="primary" :icon="supplierButtonTypeIcon" style="width:120px;">{{supplierButtonTypeText}}</Button>
      </div>

    </template>

    <review-modal ref="supplierReviewModal" @on-review-success="reviewSuccess"></review-modal>
  </div>
</template>

<script>
import ImageComponent from "./../comm-comp/imageComponent.vue";
import ReviewModal from "../comm-comp/reviewModalComp.vue";

export default {
  name: "supplier-detail",
  components: {
    ImageComponent,
    ReviewModal
  },
  data() {
    const validateSupplierNameNoBlank = (rule, value, callback) => {
      var validObj = rule.validObj;
      var reg = new RegExp(validObj.regexp);
      if (reg.test(value)) {
        callback(new Error(validObj.msg));
      } else {
        callback();
      }
    };
    return {
      supplierDetailForm: {
        account: "",
        password: "",
        supplierName: "",
        supplierType: 0,
        linkMan: "",
        mobile: "",
        telephone: "",
        email: "",
        qq: "",
        address: "",
        lng: "",
        lat: "",
        // supplierDetailFormAddressArr: [],
        province: "",
        city: "",
        // area: "",
        // street: "",
        litpic: "",
        piclist: "",
        licensepic: "",
        runRange: "",
        content: ""
      },
      supplierDetailFormAddressArr:[],
      againRenderCascaderFlag: false,
      accountDisabled: false,
      // modalType: 0,
      errorPass: "",
      supplierDetailOperateType: 0,
      submitLoading: false,
      supplierButtonTypeText: "添加",
      supplierButtonTypeIcon: "plus-round",
      reviewPageModal: false,
      supplierDetailFormValidate: {
        account: [
          { required: true, message: "商户账号不能为空", trigger: "blur" },
          { max: 64, message: '商户账号太长'}
          // ,{ validator: validatesupplierNameNoBlank, validObj:{regexp:/\s+/g,msg:"商户账号不允许包含空格"} ,trigger: "blur"}
        ],
        supplierName: [
          { required: true, message: "商户名称不能为空", trigger: "blur" },
          { max: 64, message: '商户名称太长'},
          { validator: validateSupplierNameNoBlank, validObj:{regexp:/\s+/g,msg:"商户名称不允许包含空格"} ,trigger: "blur"}
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符'}
        ]
      }
    };
  },
  watch: {
    supplierDetailFormAddressArr: function (addr) {
      if(addr.length > 0){
        this.supplierDetailForm.province = JSON.stringify(addr[0]);
        this.supplierDetailForm.city = JSON.stringify(addr[1]);
        // this.supplierDetailForm.area = JSON.stringify(addr[2]);
        // this.supplierDetailForm.street = JSON.stringify(addr[3]);
        console.log(this.supplierDetailForm.province,this.supplierDetailForm.city);
      }else{
        this.supplierDetailForm.province = "";
        this.supplierDetailForm.city = "";
        // this.supplierDetailForm.area = "";
        // this.supplierDetailForm.street = "";
      }
    }
  },
  methods: {
    resetFormByType: function(type, updateSupplier){
      console.log(updateSupplier);
      // this.currSelectedSupplier = "";
      this.$refs.supplierDetailForm.resetFields();
      this.againRenderCascader(true);
      this.reviewPageModal = false;
      if(0 === type){
        this.supplierDetailOperateType = 0;
        this.supplierButtonTypeText = "添加";
        this.supplierButtonTypeIcon = "arrow-up";
        for (let attr in this.supplierDetailForm) {
            this.supplierDetailForm[attr] = "";
        }
        this.supplierDetailForm.supplierType = 0;

        this.$refs.supplierLitpicComp.initByType("supplier",0,null);
        this.$refs.supplierPiclistComp.initByType("supplier",0,null);
        this.$refs.supplierLicensepicComp.initByType("supplier",0,null);

      }else if(1 === type){
        this.supplierDetailOperateType = 1;
        this.supplierButtonTypeText = "编辑";
        this.supplierButtonTypeIcon = "edit";
        this.supplierDetailForm = updateSupplier;

        this.combineALCascaderArr(updateSupplier);

        this.$refs.supplierLitpicComp.initByType("supplier",1,updateSupplier.litpic);
        this.$refs.supplierPiclistComp.initByType("supplier",1,updateSupplier.piclist);
        this.$refs.supplierLicensepicComp.initByType("supplier",1,updateSupplier.licensepic);

        for (let attr in this.supplierDetailForm) {
          if (this.supplierDetailForm[attr] == null) {
            this.supplierDetailForm[attr] = "";
          }
        }
      }else if(2 === type){
        this.supplierDetailOperateType = 2;
        this.supplierButtonTypeText = "审核";
        this.supplierButtonTypeIcon = "ios-arrow-up";
        this.supplierDetailForm = updateSupplier;

        console.log("shenhe");
        this.$refs.supplierLitpicComp.initByType("supplier",2,updateSupplier.litpic);
        this.$refs.supplierPiclistComp.initByType("supplier",2,updateSupplier.piclist);
        this.$refs.supplierLicensepicComp.initByType("supplier",2,updateSupplier.licensepic);

        this.reviewPageModal = true;


      }else {}

    },

     // 地址数据组装
    combineALCascaderArr: function(supplierObj){
      if('' != supplierObj.province && null != JSON.parse(supplierObj.province) && '' != supplierObj.city && null != JSON.parse(supplierObj.city)){
        let supplierProvCode = JSON.parse(supplierObj.province).code;
        let supplierCityCode = JSON.parse(supplierObj.city).code;
        this.supplierDetailFormAddressArr = [supplierProvCode, supplierCityCode];
      }
      return;
    },

    againRenderCascader: function(flag){
      this.againRenderCascaderFlag = flag;
      return;
    },

    submitSupplier() {
      console.log("=========submitSupplier=======")
      this.$refs.supplierDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          if(this.supplierDetailOperateType === 1) {
            url = "/supplier/update";
            this.submitLoading = true;
            this.putRequest(url, this.supplierDetailForm).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");
                this.againRenderCascader(false);
                this.$emit('on-supplier-success',true);
              }
            });
          }else if(this.supplierDetailOperateType === 0){
            url = "/supplier/create";
            console.log(this.supplierDetailForm)
            this.submitLoading = true;
            const createSupplier = this.supplierDetailForm;
            console.log("==============");
            if(createSupplier.id) delete createSupplier.id;
            this.postRequest(url, createSupplier).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("操作成功");
                this.againRenderCascader(false);
                // this.init();
                this.$emit('on-supplier-success',true);
              }
            });
          }else if(this.supplierDetailOperateType === 2){
            console.log("===========222222222=================");
            const reviewSupplier = this.supplierDetailForm;
            let reviewObj={
              reviewId: reviewSupplier.id,
              title: "商户审核",
              status: reviewSupplier.status+'',
              reason: reviewSupplier.reason
            }
            let reviewUrl = "/supplier/review";
            this.$refs.supplierReviewModal.openReviewModal(true,reviewUrl,reviewObj);

          }else {}

        }
      });
    },
    reviewSuccess:function(v){
      console.log("=========审核成功========");
      if(v){
        this.$emit('on-supplier-review-success',true);
      }
    },

    cancelSubmitSupplier:function(){
      this.againRenderCascader(false);
      this.$emit('on-supplier-cancel',true);
    }

    //picture methods start
    ,
    supplierLitpicRemoveSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.litpic = res.pathStr;
      }
    },
    supplierLitpicAddSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.litpic = res.pathStr;
      }
    },
    supplierPiclistRemoveSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.piclist = res.pathStr;
      }
    },
    supplierPiclistAddSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.piclist = res.pathStr;
      }
    },
    supplierLicensepicRemoveSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.licensepic = res.pathStr;
      }
    },
    supplierLicensepicAddSuccess:function(res){
      if(res.flag){
        this.supplierDetailForm.licensepic = res.pathStr;
      }
    }
     //picture methods end
  }
};
</script>

